<template>
    <div class="hot-box">
        <!-- tab-content -->
        <div class="tab-content">
            <div class="page n-hot active" ref='page'>
                <div class="list-wrap">
                    <!-- FHotBanner -->
                    <f-hot-banner v-show="$route.path === '/movie/f-hot'"></f-hot-banner>
                    <div class="item" data-id="248172" data-bid="dp_wx_home_movie_list" v-for="item in movieList" :key="item.id">
                        <div class="main-block">
                            <div class="avatar" sort-flag="">
                                <div class="default-img-bg">
                                    <img onerror="this.style.visibility='hidden'"  :src="item.img | imgFilter('128.180')">
                                </div>
                            </div>
                            <div class="mb-outline-b content-wrapper">
                                <div class="column content">
                                    <div class="box-flex movie-title">
                                        <div class="title line-ellipsis v3dimax_title" id="maoyan-title-ellipsis">{{item.nm}}</div>
                                        <span class="version" :class="[item.version]"></span>
                                    </div>
                                    <div class="detail column">
                                        <div class="score line-ellipsis">
                                            <span class="score-suffix">观众评</span>
                                            <span class="grade">{{item.sc}}</span>
                                        </div>
                                        <div class="actor line-ellipsis" id="maoyan-actor-ellipsis">{{item.star}}</div>
                                        <div class="show-info line-ellipsis">{{item.showInfo}}</div>
                                    </div>
                                </div>
                                <div class="button-block" data-id="248172">
                                    <!-- <div class="btn" :class="[item.globalReleased ? 'normal' : 'pre', !(item.showst === '3' || item.showst === '4') ? 'toggle-wish-btn' : '']" data-wishst="0"> -->
                                    <div class="btn" :class="[btnColor(item.showst)]" data-wishst="0">
                                        <span class="fix" data-bid="dp_wx_home_movie_btn">{{text(item.showst)}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions , mapGetters } from 'vuex'
import FHotBanner from './FHotBanner'
import scroll from 'Utils/scroll'
export default {
    props: {
        state: String,
        stateType: String
    },
    data() {
        return {
            movieList: [],
        }
    },
    computed: {
        movieType() {
            return this.state === '/movie/n-hot' ? 'movieOnInfoList': 'comingList'
        },
        ...mapGetters(['getNowHots'])
    },
    methods: {
        ...mapActions(['getNowHot']),
        // 按钮颜色判断
        btnColor(showst) {
            switch (showst) {
                case 3:
                    return 'normal'
                    break;
                case 4:
                    return 'pre'
                    break;
                default:
                    return 'toggle-wish-btn'
                    break;
            }
        },
        text(showst) {
            switch (showst) {
                case 3:
                    return '购票'
                    break;
                case 4:
                    return '预售'
                    break;
                default:
                    return '想看'
                    break;
            }
        }
    },
    watch: {
        async state () {
            await this.getNowHot( this.movieType )
            this.movieList = this.getNowHots ? this.getNowHots[this.stateType] : []
        }
    },
    async created() {
        await this.getNowHot( this.movieType )
        this.movieList = this.getNowHots ? this.getNowHots[this.stateType] : []

        // movieIds分组
        // this.movieIds = this.getNowHots ? this.getNowHots.movieIds : []
        // 推荐短路写法
        this.movieIds = this.getNowHots && _.chunk(this.getNowHots.movieIds.slice(12), 10) || []

        this.$nextTick( () => {
            scroll({
                el: this.$refs.page,
                count: this.count,
                arr: this.movieIds,
                url: '/maoyan/ajax/moreComingList',
                method: 'get',
                params: {
                token: '',
                movieIds: ''
                },
                dataList: this.movieList,
                dataType: 'coming'
            })
        })        
    },
    components: {
        FHotBanner
    }
}
</script>

<style lang="stylus" scoped>
    @import '~Css/movie-list.css'
    @import '~Css/_border.styl'
    @import '~Css/_variable.styl'
    @import '~Css/_eliplise.styl'
    .hot-box
        flex 1
        overflow hidden
        font-size 0.2rem
        .tab-content
            height 100%
            display flex
            flex-direction column
            .page
                height 100%
                position static
                .list-wrap
                    .item
                        .content-wrapper
                            border 0 0 1px 0, $borderColor
                            .movie-title
                                display flex
                                #maoyan-title-ellipsis
                                    ellipsis()
                            .detail
                                #maoyan-actor-ellipsis
                                    ellipsis()
</style>